<template>
	<!-- 顶部导航栏 -->
	<view class="boxc">
		<image class="boxc_bg" src="https://img.jingkakeji.com/img/static/leave_blank.png" mode="aspectFill"></image>
		<view class="leave_black">

		</view>
		<view class="tops">
			<view class="tops_left">
				<image class="img_one" @click="onbacks" mode="" src="https://img.jingkakeji.com/img/static/lianheq.png">
				</image>
				<image class="img_two" :style="{ width: imgOneWidth }" :src="images" mode=""></image>
			</view>
			<view class="tops_right">
				<image style="width: 50rpx;height: 10rpx;margin-top: 40rpx;margin-right: 30rpx;"
					src="https://img.jingkakeji.com/img/static/lianhe.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		playSound
	} from '../../utils/soundSettings';
	export default {
		props: ['images', 'title'],
		data() {
			return {
				imgOneWidth: '80rpx'
			}
		},
		mounted() {
			const pages = getCurrentPages();
			const currentPage = pages[pages.length - 1];
			// 判断当前页面路径是否包含'my'或'pks'
			console.log(pages);
			if (
				currentPage &&
				currentPage.route &&
				(
					currentPage.route.toLowerCase().includes('my') ||
					currentPage.route.toLowerCase().includes('pks') ||
					currentPage.route.toLowerCase().includes('mangbox') ||
					currentPage.route.toLowerCase().includes('lucky')
				)
			) {
				this.imgOneWidth = '150rpx';
				// console.log('123');
			}
		},
		methods: {
			onbacks() {
				playSound("https://img.jingkakeji.com/img/static/music/click.mp3");
				const pages = getCurrentPages();
				if (pages && pages.length > 1) {
					uni.navigateBack();
				} else {
					uni.switchTab({
						url: '/pages/index/index'
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	.boxc {
		width: 100vw;
		/* #ifdef APP-PLUS */
		height: 170rpx;
		/* #endif */
		/* #ifdef H5 */
		height: 90rpx;
		/* #endif */
		position: relative;

		.boxc_bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 0;
		}
	}

	.leave_black {
		width: 100%;
		/* #ifdef APP-PLUS */
		height: 70rpx;
		/* #endif */
		/* #ifdef H5 */
		height: 0rpx;
		/* #endif */
		position: relative;
		z-index: 1;
	}

	.tops {
		width: 100%;
		height: 100rpx;
		margin: 0;
		padding: 0;
		display: flex;
		position: relative;
		z-index: 1;
	}

	.tops_left {
		width: 60%;
		height: 100%;
		display: flex;
		align-items: center;
	}

	.img_one {
		width: 40rpx;
		height: 40rpx;
		margin: 0 10rpx;
	}

	.img_two {
		width: 20%;
		height: 50%;
	}

	.tops_right {
		width: 40%;
		height: 100%;
		display: flex;
		justify-content: flex-end;
		/* 所有子元素靠右 */
	}

	.card {
		display: flex;
		/* 整体横向排列 */
		gap: 12px;
		/* 左侧图片和右侧内容的间距 */
		align-items: flex-start;
		/* 顶部对齐 */
		// padding: 12px;
		// border: 1px solid #eee;
	}

	.card-img {
		width: 70rpx;
		/* 左侧图片宽度 */
		height: 70rpx;
		/* 高度自适应 */
		object-fit: cover;
		/* 防止图片变形 */
		padding: 10rpx;
	}

	.card-content {
		display: flex;
		flex-direction: column;
		/* 右侧内容垂直排列 */
		gap: 8px;
		/* 主标题和副标题的间距 */
	}

	.title {
		font-size: 16px;
		font-weight: bold;
	}

	.footer {
		display: flex;
		/* 右下小图片+文字横向排列 */
		align-items: center;
		/* 垂直居中 */
		gap: 6px;
		/* 小图标和文字的间距 */
		font-size: 12px;
		color: #666;
	}

	.small-img {
		width: 16px;
		height: 16px;
	}
</style>